<template>
  <div class="device_multi_selection" style="float:left;">
    <el-button @click="openDialog">选择设备</el-button>
    <el-dialog title="选择设备" :visible.sync="dialog_visible" class="jc_dialog_wrap jc_dialog_item el-dialog--middle">
      <el-form class="jc_search_wrap" v-model="searchList">
        <label>设备编号</label>
        <el-select placeholder="请选择" v-model="pl88">
          <el-option label="可用" value="enabled"></el-option>
          <el-option label="不可用" value="disabled"></el-option>
        </el-select>
        <label>设备名称</label>
        <el-select placeholder="请选择" v-model="pl88">
          <el-option label="可用" value="enabled"></el-option>
          <el-option label="不可用" value="disabled"></el-option>
        </el-select>
        <label>设备类别</label>
        <el-select placeholder="请选择" v-model="pl88">
          <el-option label="可用" value="enabled"></el-option>
          <el-option label="不可用" value="disabled"></el-option>
        </el-select>
        <label>归属部门</label>
        <el-select placeholder="请选择" v-model="pl88">
          <el-option label="可用" value="enabled"></el-option>
          <el-option label="不可用" value="disabled"></el-option>
        </el-select>
        <el-button @click=""><i class="el-icon-search"></i>搜索</el-button>
      </el-form>
      <el-table :data="testData"   border fit highlight-current-row class="jc_table_wrap" ref="multipleTable" @selection-change="handleSelectionChange">
        <el-table-column  type="selection">
        </el-table-column>
        <el-table-column label='设备编码'>
          <template scope="scope">
            {{scope.row.name}}
          </template>
        </el-table-column>
        <el-table-column label="设备名称">
          <template scope="scope">
            {{scope.row.sex}}
          </template>
        </el-table-column>
        <el-table-column label="规格型号">
          <template scope="scope">
          </template>
        </el-table-column>
        <el-table-column label="归属部门">
          <template scope="scope">
            {{scope.row.department}}
          </template>
        </el-table-column>
        <el-table-column label="设备类型">
          <template scope="scope">
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submits">确定</el-button>
        <el-button @click="dialog_visible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>

  import ElButton from "../../../node_modules/element-ui/packages/button/src/button.vue";


  export default {
    props: {

    },
    components: {ElButton},
    data() {
      return {
        dialog_visible: false,
        searchList: {},
        multipleSelection: [],
        pl88: '',
        testData: [{sex: "女", name: "吉祥", department: '部门1'}, {sex: "男", name: "如意", department: "部门1"}],
      }

    },
    computed: {

    },
    created() {



    },
    methods: {
      openDialog() {
        this.dialog_visible = true;
      },
      submits() {
        this.dialog_visible = false;
        this.$emit("input", this.multipleSelection);
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
    },
    watch: {
      value(v) {
      },
      innerValue(v) {

      }
    }
  }
</script>
